<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .none {
      -webkit-filter: none;
    }

    .blur {
      -webkit-filter: blur(3px);
    }

    .grayscale {
      -webkit-filter: grayscale(1);
    }

    .invert {
      -webkit-filter: invert(1);
    }

    .sepia {
      -webkit-filter: sepia(1);
    }
  </style>
</head>
<body>
<div>
  <label>filter:</label>
  <select id="filter">
    <option value="none">None</option>
    <option value="blur">Blur</option>
    <option value="grayscale">Grayscale</option>
    <option value="invert">Invert</option>
    <option value="sepia">Sepia</option>
  </select>
  <div>
    <button id="snapshot">截图</button>
  </div>

  <video autoplay playsinline id="player"></video>

  <div>
    <canvas id="picture" width="320" height="240"></canvas>
  </div>
</div>
<script src="../static/adapter.js"></script>
<script src="../utils/utils.js"></script>
<script>
  'use strict'

  var $videoPlay = $('video#player')
  var $filter = $('#filter')
  var $snapshot = $('#snapshot')
  var $picture = $('#picture')

  /**
   * 获取到流， 直接赋值给 video
   *
   * @param stream
   * @returns {Promise<MediaDeviceInfo[]>}
   */
  function gotMediaStream (stream) {
    $videoPlay.srcObject = stream
  }

  /**
   * 获取设备信息以及权限
   * 切换浏览器或者重新打开，都需要重新调用 || 重新获取。
   */
  function start () {
    const getUserMedia = testUserMedia()
    if (getUserMedia) {
      var constraints = {
        video: {
          width: 320,
          height: 240,
        },
        audio: {
          // 降噪 开启
          noiseSuppression: true,
          // 回音消除 开启
          echoCancellation: true,
        },
      }

      getUserMedia(constraints)
        .then(gotMediaStream)
    }
  }

  start ()

  $filter.onchange = function () {
    $videoPlay.className = $filter.value
  }

  /**
   * 截图
   * 从视频中获取图片
   */
  $snapshot.onclick = function () {
    $picture.getContext('2d').drawImage($videoPlay, 0, 0, $picture.width, $picture.height)
  }
</script>
</body>
</html>
